<template>
    <div class="common-layout">
        <div class="login">
            <h1 class="title">{{ active == 1 ? '登录' : '注册'}}</h1>
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px;"
                :model="ruleForm"
                :rules="active == 1 ? loginRules : registerRules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
                
                >
                <el-form-item label="用户名" prop="username" style="color: red;" >
                    <el-input v-model="ruleForm.username"/>
                </el-form-item>
                <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword" v-if="active == 2">
                    <el-input v-model="ruleForm.confirmPassword" type="password" />
                </el-form-item>
                
                <el-form-item style="margin-left: 200px;">
                    <el-button type="primary" @click="active == 1 ? loginSubmitForm() : registerSubmitForm()">{{ active == 1 ? '登录' : '注册'}}</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <!--  active = (active == 1) ? 2 : 1 -->
            <div class="footer">
              <label @click="handleClick">{{ active == 1 ? '去注册' : '去登录' }}</label>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue';
import { ElForm, ElMessage } from 'element-plus';
import axios from 'axios';
import router from '@/router';
import { userGoodsStore } from '../../store/good.js'
// import {path},
 
export default {
  components: {
    ElForm,
  },
  setup(){
    
  },
  data() {
    return {
      store:userGoodsStore(),
      active:1,
      formSize: 'default',
      ruleForm: reactive({
        username: '',
        password:'',
        confirmPassword:''
      }),
      loginRules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度 3 到 10', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 10, message: '长度 4 到 10', trigger: 'blur' },
        ]
      },
      registerRules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度 3 到 10', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 10, message: '长度 4 到 10', trigger: 'blur' },
        ]
        ,
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 4, max: 10, message: '长度 4 到 10', trigger: 'blur' }
        ]
      },
      locationOptions: ['Home', 'Company', 'School'],
      options: Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
      })),
      ruleFormRef: null,
      userlist:[]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.ruleFormRef = this.$refs.ruleFormRef;
    });
    axios.get('users.json')
    .then(res => {
        this.userlist = res.data.userslist;
        // console.log(this.userlist);
    })
    .catch(err => {
        console.error('请求用户数据出现错误：', err);
    });
  },
  
  methods: {
    handleClick() {
      this.resetForm();
      this.active = this.active === 1 ? 2 : 1;
    },
    async writeUsersFile(userslist) {
            try {
                // 发送POST请求到后端的/api/register接口（假设后端接口是这样定义的用于更新用户数据）
                const response = await axios.post('/api/register', { userslist });
                if (response.status === 200 && response.data.message === 'User registered successfully') {
                    return true;
                } else {
                    throw new Error('后端返回错误信息：' + response.data.message);
                }
            } catch (err) {
                console.error('与后端通信出现错误：', err);
                throw err;
            }
    },
    async loginSubmitForm() {
      if (!this.ruleFormRef) return;
      await this.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          let flag = this.userlist.some(v => v.username === this.ruleForm.username && v.password === this.ruleForm.password)
          if (flag) {
            const token = Math.random().toString(18).substr(2);
            localStorage.setItem('token', token);
            sessionStorage.setItem('username',this.ruleForm.username)
            
            const direction = router.currentRoute.value.query.direction;//处理去哪里
            if (direction) {
              router.push(direction);
              ElMessage({type: 'success', message: '跳转成功',})
            } else {
              router.push('/')
              ElMessage({type: 'success', message: '登录成功',})
            }
          } else {
            ElMessage({type: 'error', message: '请输入正确的用户名和密码',})
          }
        } else {
          ElMessage({type: 'error', message: '注意长度'})
          console.log('error submit!', fields);
        }
      });
    },
    async registerSubmitForm() {
      if (!this.ruleFormRef) return;
      await this.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          let flag = this.userlist.some(v => v.username === this.ruleForm.username);
          //不存在注册，不发token
          if (!flag) {
            if (this.ruleForm.password === this.ruleForm.confirmPassword) {
              const newUser = {
                        username: this.ruleForm.username,
                        password: this.ruleForm.password
                    };
                    // 将新用户添加到用户列表
                    this.userlist.push(newUser);
                    console.log(this.userlist)
                    // localStorage.setItem('userlist', JSON.stringify(this.userlist));
                    // ElMessage({ type: 'success', message: '注册成功', });
                    // 调用方法将更新后的用户列表写回 users.json 文件（下面假设定义了一个 writeUsersFile 方法来执行写文件操作）
                    // this.writeUsersFile(this.userlist).then(() => {
                    //     ElMessage({ type: 'success', message: '注册成功', });
                    // }).catch((err) => {
                    //     console.error('保存用户数据出现错误：', err);
                    //     ElMessage({ type: 'error', message: '注册失败，请稍后再试', });
                    // });
              ElMessage({type: 'success', message: '注册成功',})
            }
          } else {
            ElMessage({type: 'error', message: '用户已存在',})
          }
        } else {
          ElMessage({type: 'error', message: '注意长度'})
          console.log('error submit!', fields);
        }
      });
    },
    resetForm() {
      if (!this.ruleFormRef) return;
      this.ruleFormRef.resetFields();
    },
    
  },
};
</script>


<style setup>
  .el-form-item__label {
    color:white !important;
  }
  </style>

  <style scoped>
  .common-layout{
      background: url(../../images/login.png) no-repeat center;
      width: 100%;
      height: 100%;
      background-size: cover;
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
  }
  .login{
      width: 400px;
      height: 300px;
      background-color: #7b7fd381;
      /*
      它会使元素后面的区域产生模糊效果,
      它会调整元素后面区域的饱和度
      */
      backdrop-filter: blur(5px) saturate(0.5);
      border-radius: 13px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 40px 60px;
      /* 水平偏移量：50px，即阴影向右偏移 50 像素，
      垂直偏移量：50px，即阴影向下偏移 50 像素，
      模糊半径：100px，使阴影产生模糊效果，
      扩散半径：-20px，负值表示阴影向内收缩，使阴影变小
      inset 关键字表示这是一个内阴影，会出现在元素内部
      */
      box-shadow: rgba(50, 50, 93, 0.25) 50px 50px 100px -20px,
                  rgba(0, 0, 0, 0.5) 30px 30px 60px -30px,
                  rgba(217, 217, 222, 0.35) 2px -2px 6px 0px inset;
    /* 将元素的显示模式设置为 Flex 布局，这允许使用 Flex 布局的相关属性来控制元素内部子元素的布局和排列方式 */
      display: flex;
      /* 在 Flex 布局的主轴上，将子元素在水平或垂直方向上居中对齐，
    具体取决于 flex-direction 的设置。
    这里会将子元素在主轴上居中对齐，
    若 flex-direction 为 row，则是水平居中；
    若 flex-direction 为 column，则是垂直居中。 */
      justify-content: center;
      flex-direction: column;
      font-weight: 300;
      /* 在 Flex 布局的交叉轴上，将子元素在起始位置对齐，
    由于 flex-direction 为 column，交叉轴是水平方向，
    因此子元素将沿水平方向向左对齐。 */
      align-items: flex-start;
      margin: auto;
  }
  .title {
    margin: auto;
    color: white;
  }
  .footer {
    color: aqua;
    text-decoration: underline;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: -20px;
  }
  </style>